<template>
    <div>
        <div id="block"  >
            <span id="sp"  >请选择月份：</span>
            <el-date-picker id="eld"
                            v-model="value2"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择月"
                            @change="myEcharts">
            </el-date-picker>
        </div>
        <div id="main" style="width: 1200px;height:600px;"></div></div>

</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Echarts",
        data() {
            return {
                value2: '20'
            }
        },
        created() {
            //根据token获取用户的信息
            setTimeout( ()=>{ //延时加载echarts初始化函数
                this.myEcharts()
            },100)
        },
        methods:{
            selectTime(value1){
                console.log(value1)
            },
            myEcharts(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var mergedate;
            this.$http.post(`/compay/getall/${this.value2}`).then(function (result) {
                console.log(mergedate)

                mergedate=result.data.result.chardata

            // 指定图表的配置项和数据
                var option = {
                title: {
                    text: '收入统计图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            xAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data:mergedate.data,
                },
                yAxis: {
                    type: 'value'

                },
                series: [{
                    data:mergedate.price,

                    type: 'bar'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            });
        }}
    }

</script>

<style scoped>

</style>
